<template>
  <div>
    <div style="float:left;">
      <el-button type="primary" icon="el-icon-arrow-left" circle size="small" @click="goBack"></el-button>&nbsp;&nbsp;&nbsp;
      <el-select
        v-model="curDepartment"
        value-key="id"
        placeholder="请选择"
        @change="selectDepartment"
      >
        <el-option
          v-for="item in departments"
          :key="item.id"
          :label="item.label"
          :value="{label:item.label,id:item.id}"
        ></el-option>
      </el-select>
      <el-select
        v-model="curPart"
        value-key="id"
        placeholder="请选择"
        @change="selectPart"
        :disabled="disabledPart"
      >
        <el-option
          v-for="item in parts"
          :key="item.id"
          :label="item.label"
          :value="{label:item.label,id:item.id}"
        ></el-option>
      </el-select>
    </div>
    <el-table :data="tableData" style="width:100%">
      <el-table-column type="index" :index="1"></el-table-column>
      <el-table-column prop="departmentName" label="部门" width="180"></el-table-column>
      <el-table-column prop="partName" label="区域" width="180"></el-table-column>
      <el-table-column prop="id" label="id" width="180"></el-table-column>
      <el-table-column prop="label" label="设备名" width="180"></el-table-column>
      <el-table-column prop="level" label="设备类型" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "PhyTable",
  model: {
    prop: "treeData",
    event: "change"
  },
  props: {
    treeData: {
      type: Object,
      required: true
    },
    selectedNode: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      tableData: [],
      departments: [
        {
          id: -1,
          label: "--------"
        }
      ],
      parts: [
        {
          id: -1,
          label: "--------"
        }
      ],
      curDepartment: "--------",
      curPart: "--------",
      savedDepartment: {},
      changeDepartmenFlag: true,
      changePartFlag: true,
      disabledPart: false
    };
  },
  computed: {},
  methods: {
    handleEdit(select, row) {
      this._handleButtonclick("edit",row)
    },
    handleDelete(select, row) {
      this._handleButtonclick("delete",row)
      this.selectPart(this.curPart)
    },
    _handleButtonclick(key,row) {
      const data = { label: row.label, id: row.id, level: 4 };
      this.$emit("on_button_click", { key, data });
    },
    goBack() {
      this.$emit("go-back");
    },
    _mapData(data, fn) {
      fn(data);
      const children = data.children;
      if (children) {
        children.forEach(child => {
          this._mapData(child, fn);
        });
      }
    },
    initData() {
      var departmentName, partName;
      this._mapData(this.treeData, data => {
        if (data.level == 2) {
          departmentName = data.label;
          this.departments.push({
            label: departmentName,
            id: data.id
          });
        } else if (data.level == 3) {
          partName = data.label;
          this.parts.push({
            label: partName,
            id: data.id
          });
        } else if (data.level == 4) {
          data.departmentName = departmentName;
          data.partName = partName;
          this.tableData.push(data);
        }
      });
    },
    initSelected() {},
    selectDepartment(event) {
      if (this.changeDepartmenFlag) {
        this.savedDepartment = event;
        this.parts = [
          {
            label: "--------",
            id: -1
          }
        ];
        this.curPart = { label: "--------", id: -1 };
        this.tableData = [];
        if (event.id == -1) {
          this.departments = [{ label: "--------", id: -1 }];
          this.disabledPart = true;
          this.initData();
        } else {
          this.disabledPart = false;
          this._mapData(this.treeData, data => {
            if (event.id == data.id && data.level == 2) {
              this._opChildren(data, child => {
                this.parts.push({
                  label: child.label,
                  id: child.id
                });
                this._opChildren(child, grandson => {
                  this.tableData.push(grandson);
                });
              });
            }
          });
        }
      }
    },
    selectPart(event) {
      this.tableData = [];
      if (event.id == -1) {
        this._mapData(this.treeData, data => {
          if (this.savedDepartment.id == data.id) {
            this._opChildren(data, child => {
              this._opChildren(child, grandson => {
                this.tableData.push(grandson);
              });
            });
          }
        });
      } else {
        this._mapData(this.treeData, data => {
          // 修改列表数据
          if (event.id == data.id) {
            this._opChildren(data, child => {
              this.tableData.push(child);
            });
          }
        });
      }
    },
    _opChildren(data, fn) {
      const children = data.children;
      if (children) {
        children.forEach(child => {
          fn(child);
        });
      }
    },
    setDepartment(data) {
      this.selectDepartment(data);
      this.curDepartment = data;
    },
    setPart(data) {
      this.selectPart(data);
      this.curPart = data;
    }
  },
  mounted() {
    this.selectDepartment({ label: "--------", id: -1 });
    if (this.selectedNode.level == 2) {
      this.setDepartment({
        label: this.selectedNode.label,
        id: this.selectedNode.id
      });
    } else if (this.selectedNode.level == 3) {
      this._mapData(this.treeData, data => {
        // 由于这里需要用到父节点的data，所以不能用_opChildren函数
        const children = data.children;
        if (children) {
          children.forEach(child => {
            if (child.id == this.selectedNode.id) {
              this.setDepartment({ label: data.label, id: data.id });
            }
          });
        }
      });
      this.setPart({
        label: this.selectedNode.label,
        id: this.selectedNode.id
      });
    } else if (this.selectedNode.level == 4) {
      this._mapData(this.treeData, data => {
        // 同上，也不能用_opChildren函数
        const children = data.children;
        if (children) {
          children.forEach(child => {
            const grandsons = child.children;
            if (grandsons) {
              grandsons.forEach(grandson => {
                if (grandson.id == this.selectedNode.id) {
                  this.setDepartment({ label: data.label, id: data.id });
                  this.setPart({ label: child.label, id: child.id });
                }
              });
            }
          });
        }
      });
    }

    // console.log(this.tableData);
    // console.log(this.data);
  }
};
</script>

<style scope>
</style>
